import React from 'react';
import { useHistory } from 'react-router-dom';
import Lamp from '../../components/lamp';
import Button from '../../components/button';
import Typography from '../../components/typography';
import styles from './index.module.scss';

const { Text } = Typography;
const StartPage = () => {
  const history = useHistory();
  const jumpToQuestions = () => {
    history.push('/questions');
  };
  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <div className={styles.title}>
          <Text type="startPage">
            根据美国心理学家 Fleming 和 Mlls 定义的 VARK 学
          </Text>
          <Text type="startPage">习风格模型和 VARK 学习风格量表得出结论</Text>
        </div>
        <Lamp lampType="white" />
        <Button type="start" onClick={jumpToQuestions}>
          立即开始
        </Button>
      </div>
      <div className={styles.footer}>
        <Text type="startPage">全程共计 19 道题，预计时间1min</Text>
        <Text type="startPage">所有题目均可多选</Text>
      </div>
    </div>
  );
};

export default StartPage;
